<template>
    <el-container>
        <el-header>
            <div class="report_header" ref="headerHeight">
                <div class="report_header_left"></div>
                <div style="display: flex;flex-direction: row;justify-content:space-between;width: 100%;">
                    <div style="display: flex;flex-direction: row;flex-wrap: wrap;overflow: hidden;height:41px;justify-content: flex-end;">
                        <div class="report_header_query">
                            <el-input prefix-icon="el-icon-search" placeholder="请输入运费名称" v-model="query.name"></el-input>
                        </div>
                    </div>
                    <div>
                        <el-button style="margin-left: 10px;margin-top: 5px;" size="small" type="primary" @click="queryAd">查询</el-button>
                        <el-button style="margin-left: 10px;margin-top: 5px;" size="small" type="primary" @click="addClick" v-permission="['freight.add']">新增</el-button>
                    </div>
                </div>
            </div>
        </el-header>
        <div class="pd10">
            <el-table :data="freightList" border :height="curHeight" v-loadMore="[payLoads,'freight-list']">
                <el-table-column label="排序" type="index" width="56px" align="center">
                </el-table-column>
                <el-table-column label="运费名称" align="center" prop="name">
                </el-table-column>
                <el-table-column label="运费类型" align="center" prop="type" width="80">
                    <template slot-scope="{row}">
                        <span>{{row.type | watchType}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="首重/首件" align="center" prop="ykg" width="100">
                </el-table-column>
                <el-table-column label="首重价格" align="center" prop="ykgPrice" width="80">
                </el-table-column>
                <el-table-column label="续重/续件" align="center" prop="ctd" width="100">
                </el-table-column>
                <el-table-column label="续重价格" align="center" prop="ctdPrice" width="80">
                </el-table-column>
                <el-table-column label="楼层费" align="center" prop="enabledLevel" width="80">
                    <template slot-scope="scope">
                        <el-tag type="success">
                            <span>{{scope.row.enabledLevel | watchEnabledLevel}}</span>
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="起始楼层" align="center" prop="levelStart" width="80">
                </el-table-column>
                <el-table-column label="每层加价" align="center" prop="levelFreight" width="80">
                </el-table-column>
                <el-table-column label="操作" fixed="right" align="center" width="80">
                    <template slot-scope="scope">
                        <div>
                            <el-tooltip class="item" effect="dark" content="编辑" placement="top-start" v-permission="['freight.edit']">
                                <a @click="editClick(scope.row)">
                                    <i style="color: #409EFF" class="el-icon-edit"></i>
                                </a>
                            </el-tooltip>
                            <el-tooltip class="item" effect="dark" content="删除" placement="top-start" v-permission="['freight.del']">
                                <a style="margin-left: 10px" @click="deleteAd(scope.row)">
                                    <i style="color: #F56C6C" class="el-icon-delete"></i>
                                </a>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <!--新增标签-->
            <addFreight ref="addFreight" @loadFreight="loadFreight"></addFreight>
            <!--编辑标签-->
            <el-dialog title="编辑运费" v-el-drag-dialog :visible.sync="editVisible" width="800px">
                <el-container>
                    <el-main class="popup_content">
                        <el-form ref="editFreight" :model="editFreight" :rules="rules" size="mini" label-width="100px">
                            <el-form-item label="运费名称" prop="name">
                                <el-input v-model="editFreight.name" style="width: 150px"></el-input>
                            </el-form-item>
                            <el-form-item label="运费类型" prop="status">
                                <el-select v-model="editFreight.type" placeholder="请选择类型" style="width: 80px">
                                    <el-option v-for="item in freightType" :key="item.value" :label="item.label" :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-tabs v-model="activeName">
                                <el-tab-pane label="普通快递" name="first">
                                    <el-main class="popup_content">
                                        <el-table border :data="editFreightList">
                                            <el-table-column label="名称" width="180px">
                                                <template slot-scope="{row,column,$index}">
                                                    <span v-if="$index===0">默认运费</span>
                                                    <el-select style="display: inline-block" filterable v-if="$index!=0" v-model="row.areaId" placeholder="请选择城市">
                                                        <el-option v-for="(item,index) in options" :key="index" :label="item.label" :value="item.value"></el-option>
                                                    </el-select>
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="首重(KG)" v-if="editFreight.type===2" width="100px">
                                                <template slot-scope="{row}">
                                                    <el-input type="number" @mousewheel.native.prevent @DOMMouseScroll.native.prevent v-model="row.ykg"></el-input>
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="首重价格" v-if="editFreight.type===2" width="100px">
                                                <template slot-scope="{row}">
                                                    <el-input type="number" @mousewheel.native.prevent @DOMMouseScroll.native.prevent v-model="row.ykgPrice"></el-input>
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="续重(KG)" v-if="editFreight.type===2" width="100px">
                                                <template slot-scope="{row}">
                                                    <el-input type="number" @mousewheel.native.prevent @DOMMouseScroll.native.prevent v-model="row.ctd"></el-input>
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="续重价格" v-if="editFreight.type===2" width="100px">
                                                <template slot-scope="{row}">
                                                    <el-input type="number" @mousewheel.native.prevent @DOMMouseScroll.native.prevent v-model="row.ctdPrice"></el-input>
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="首件(件)" v-if="editFreight.type===1" width="100px">
                                                <template slot-scope="{row}">
                                                    <el-input type="number" @mousewheel.native.prevent @DOMMouseScroll.native.prevent v-model="row.ykg"></el-input>
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="首件价格" v-if="editFreight.type===1" width="100px">
                                                <template slot-scope="{row}">
                                                    <el-input type="number" @mousewheel.native.prevent @DOMMouseScroll.native.prevent v-model="row.ykgPrice"></el-input>
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="续件(件)" v-if="editFreight.type===1" width="100px">
                                                <template slot-scope="{row}">
                                                    <el-input type="number" @mousewheel.native.prevent @DOMMouseScroll.native.prevent v-model="row.ctd"></el-input>
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="续件价格" v-if="editFreight.type===1" width="100px">
                                                <template slot-scope="{row}">
                                                    <el-input type="number" @mousewheel.native.prevent @DOMMouseScroll.native.prevent v-model="row.ctdPrice"></el-input>
                                                </template>
                                            </el-table-column>

                                            <el-table-column label="操作">
                                                <template slot-scope="scope">
                                                    <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
                                                        <a style="margin-left: 10px" @click="delFreightTable(scope.$index)">
                                                            <i style="color: #F56C6C" class="el-icon-delete"></i>
                                                        </a>
                                                    </el-tooltip>
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                        <el-button type="primary" :loading="clicked" @click="addEditCity()" style="margin-top: 15px">添加</el-button>
                                    </el-main>
                                </el-tab-pane>
                                <el-tab-pane label="同城配送" name="second">
                                  <el-form label-width="100px">
                                    <div style="margin-bottom:20px">
                                      <span>一档：</span><span style="margin-right:10px"></span>
                                      <el-input v-model="freightTable.admin1" placeholder="请输入件数" style="width:80px;margin-right:10px"></el-input><span>{{addFreight.type==1?'件以上,每件':"kg以上,每kg"}}</span>
                                      <el-input v-model="freightTable.admin1Price" placeholder="请输入价格" style="width:80px;margin-right:10px"></el-input><span>元,跨站结算</span>
                                      <el-input v-model="freightTable.work1Price" placeholder="请输入结算价" style="width:80px;margin-right:10px"></el-input><span>元</span>

                                    </div>
                                    <div style="margin-bottom:20px">
                                      <span>二档：</span><span style="margin-right:10px"></span>
                                      <el-input v-model="freightTable.admin2" placeholder="请输入件数" style="width:80px;margin-right:10px"></el-input><span>{{addFreight.type==1?'件以上,每件':"kg以上,每kg"}}</span>
                                      <el-input v-model="freightTable.admin2Price" placeholder="请输入价格" style="width:80px;margin-right:10px"></el-input><span>元,跨站结算</span>
                                      <el-input v-model="freightTable.work2Price" placeholder="请输入结算价" style="width:80px;margin-right:10px"></el-input><span>元</span>

                                    </div>
                                    <div style="margin-bottom:20px">
                                      <span>三档：</span><span style="margin-right:10px"></span>
                                      <el-input v-model="freightTable.admin3" placeholder="请输入件数" style="width:80px;margin-right:10px"></el-input><span>{{addFreight.type==1?'件以上,每件':"kg以上,每kg"}}</span>
                                      <el-input v-model="freightTable.admin3Price" placeholder="请输入价格" style="width:80px;margin-right:10px"></el-input><span>元,跨站结算</span>
                                      <el-input v-model="freightTable.work3Price" placeholder="请输入结算价" style="width:80px;margin-right:10px"></el-input><span>元</span>

                                    </div>
                                    <div style="margin-bottom:20px">
                                      <span>四档：</span><span style="margin-right:10px"></span>
                                      <el-input v-model="freightTable.admin4" placeholder="请输入件数" style="width:80px;margin-right:10px"></el-input><span>{{addFreight.type==1?'件以上,每件':"kg以上,每kg"}}</span>
                                      <el-input v-model="freightTable.admin4Price" placeholder="请输入价格" style="width:80px;margin-right:10px"></el-input><span>元,跨站结算</span>
                                      <el-input v-model="freightTable.work4Price" placeholder="请输入结算价" style="width:80px;margin-right:10px"></el-input><span>元</span>

                                    </div>
                                    <div>
                                      <span>五档：</span><span style="margin-right:10px"></span>
                                      <el-input v-model="freightTable.admin5" placeholder="请输入件数" style="width:80px;margin-right:10px"></el-input><span>{{addFreight.type==1?'件以上,每件':"kg以上,每kg"}}</span>
                                      <el-input v-model="freightTable.admin5Price" placeholder="请输入价格" style="width:80px;margin-right:10px"></el-input><span>元,跨站结算</span>
                                      <el-input v-model="freightTable.work5Price" placeholder="请输入结算价" style="width:80px;margin-right:10px"></el-input><span>元</span>

                                    </div>
                                  </el-form>
                                  <div>
                                    <span>楼层费：</span>
                                    <el-input v-model="freightTable.levelStart" placeholder="起收楼层" style="width:80px;margin-right:10px"></el-input><span>层以上</span>
                                    <span>，每层加价</span>
                                    <el-input v-model="freightTable.levelFreight" placeholder="每层加价" style="width:80px;margin-right:10px"></el-input><span>元</span>
                                  </div>
                                </el-tab-pane>

                            </el-tabs>
                        </el-form>
                    </el-main>
                </el-container>
                <div slot="footer" class="dialog-footer">
                    <el-row>

                        <el-col :span="22">
                            <el-button @click="editVisible = false">取 消</el-button>
                            <el-button type="primary" :loading="clicked" @click="updateFreight('editFreight')">确 定</el-button>
                        </el-col>
                    </el-row>
                </div>
            </el-dialog>
        </div>
        <el-footer class="el-footerBox">
            <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" @pagination="loadFreight"></pagination>
        </el-footer>
    </el-container>
</template>

<script>
import { EventBus } from "@/api/eventBus";
import addFreight from "./add";
import Pagination from "@/components/Pagination";
import elDragDialog from "@/directive/el-drag-dialog"; // base on element-ui
import province from "../../components/Distpicker/province";
import permission from "@/directive/permission/index.js"; // 权限判断指令
import { list, save, del, find, update } from "../../api/freight";
import loadMore from "@/utils/loadMore.js";
export default {
    directives: { elDragDialog, permission, loadMore },
    name: "freight-list",
    activated() {
        this.payLoads = new Date().getTime();
    },
    data() {
        return {
            timeoptions: [
                {
                    value: "45",
                    label: "45分钟",
                },
                {
                    value: "60",
                    label: "60分钟",
                },
                {
                    value: "75",
                    label: "75分钟",
                },
                {
                    value: "90",
                    label: "90分钟",
                },
                {
                    value: "105",
                    label: "105分钟",
                },
                {
                    value: "120",
                    label: "120分钟",
                },
            ],
            activeName: "first",
            payLoads: "",
            freightType: [
                {
                    value: 1,
                    label: "计件",
                },
                {
                    value: 2,
                    label: "计重",
                },
            ],
            editVisible: false,
            clicked: false,
            enterpriseId: "",
            addFreight: {
                type: 2,
                name: "",
            },
            itemList: [],
            cityName: "",
            freightTable: [],
            id: "",
            freightList: [],
            dialogFormVisible: false,
            total: 0,
            pageNum: 1,
            enabledLevel: "",
            pageSize: 20,
            queryType: true,
            options: [],
            editFreight: {},
            editFreightList: [],
            citys: [],
            editFreights: [],
            query: {
                name: "",
            },
            keyword: {
                name: "",
            },
            curHeight: null,
            rules: {
                name: [
                    {
                        required: true,
                        message: "请输入运费名称",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    created() {
        EventBus.$on("freight-add", (res) => {
            // 监听新增完毕
            // 更新列表数组
            this.loadFreight();
            this.freightList.splice(0, 0, res);
        });
        let cityList = [];
        this.formatCity(province[100000], cityList);
        this.options = cityList;
        this.loadFreight();
    },
    filters: {
        watchCitys(val) {
            this.options.forEach((item) => {
                if (val === item.value) {
                    return item.label;
                }
            });
        },
        watchEnabledLevel(val) {
            if (val === true) {
                return "收取";
            } else if (val === false) {
                return "不收取";
            }
        },
        watchType(val) {
            if (val === 1) {
                return "计件";
            } else if (val === 2) {
                return "计重";
            }
        },
    },
    components: {
        Pagination,
        addFreight,
    },
    mounted() {
        this.beforeMount();
        this.comeIn();
    },
    methods: {
        aaa(data){
            console.log(typeof(data));
            console.log(data);
        },
        cancel() {
            this.dialogFormVisible = false;
            this.addFreight.name = "";
            this.freightTable = [];
        },
        delFreightTable(index) {
            this.editFreightList.splice(index, 1);
        },
        finFreight() {
            find(this.editFreight.id).then((response) => {
                this.editFreight = response.data.freight;
                this.id = this.editFreight.id;
                this.enterpriseId = this.editFreight.enterpriseId;
                this.editFreight.time1= JSON.stringify(this.editFreight.time1)
                this.editFreight.time2= JSON.stringify(this.editFreight.time2)
                this.editFreight.time3= JSON.stringify(this.editFreight.time3)
                this.editFreight.time4= JSON.stringify(this.editFreight.time4)
                this.editFreight.time5= JSON.stringify(this.editFreight.time5)
                console.log('8888888888888888889999999999999');
                console.log(typeof(this.editFreight.time1));
                console.log(this.editFreight.time1);
                var editFreight = {
                    ctd: this.editFreight.ctd,
                    enterpriseId: this.enterpriseId,
                    ctdPrice: this.editFreight.ctdPrice,
                    ykg: this.editFreight.ykg,
                    ykgPrice: this.editFreight.ykgPrice,
                    enabledLevel: this.editFreight.enabledLevel,
                    levelStart: this.editFreight.levelStart,
                    levelFreight: this.editFreight.levelFreight,
                };
                this.editFreightList.push(editFreight);
                this.editFreightList = this.editFreightList.concat(
                    this.editFreight.itemList
                );
                this.editFreightList.forEach((item) => {
                    item.areaId = JSON.stringify(item.areaId);
                });
                this.editFreights = this.editFreightList;
            });
        },
        editClick(row) {
            this.editFreightList = [];
            this.editFreight.id = row.id;
            this.editVisible = true;

            this.finFreight();
        },
        deleteAd(data) {
            var _this = this;
            this.$confirm("确认删除?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    del(data.id)
                        .then((response) => {
                            console.log(response);
                            _this.freightList.forEach(function (item, index) {
                                if (item.id == data.id) {
                                    _this.freightList.splice(index, 1);
                                }
                            });
                            _this.$message({
                                message: response.content,
                                offset: 120,
                                center: true,
                            });
                        })
                        .catch((error) => {
                            console.log("error!!");
                        });
                })
                .catch(() => {});
        },
        loadFreight() {
            let params = new URLSearchParams();
            params.append("pageNum", this.pageNum);
            params.append("pageSize", this.pageSize);
            params.append("name", this.keyword.name);
            list(params).then((response) => {
                this.total = response.data.total;
                this.freightList = response.data.data;
            });
        },
        addEditCity() {
            var freightTable = {
                createDate: new Date(),
                // modifyDate:new Date(),
                type: this.addFreight.type,
                ykg: "",
                levelFreight: 0,
                enabledLevel: this.editFreight.enabledLevel,
                ctd: "",
                ctdPrice: "",
                levelStart: 0,
                ykgPrice: "",
            };
            this.editFreightList.push(freightTable);
        },
        resetAd() {
            this.query.name = "";
            this.keyword = this.query;
            this.pageNum = 1;
            this.loadFreight();
        },
        queryAd() {
            this.keyword = this.query;
            this.pageNum = 1;
            this.loadFreight();
        },
        updateFreight(editFreight) {
            this.$refs[editFreight].validate((valid) => {
                if (valid) {
                    this.clicked = true;
                    this.citys = this.editFreightList[0];
                    let freight = {
                        name: this.editFreight.name,
                        id: this.id,

                        admin1: this.editFreight.admin1,
                        admin1Price: this.editFreight.admin1Price,

                        admin2: this.editFreight.admin2,
                        admin2Price: this.editFreight.admin2Price,

                        admin3: this.editFreight.admin3,
                        admin3Price: this.editFreight.admin3Price,

                        admin4: this.editFreight.admin4,
                        admin4Price: this.editFreight.admin4Price,

                        admin5: this.editFreight.admin5,
                        admin5Price: this.editFreight.admin5Price,

                        time1: this.editFreight.time1,
                        time1Price: this.editFreight.time1Price,

                        time2: this.editFreight.time2,
                        time2Price: this.editFreight.time2Price,

                        time3: this.editFreight.time3,
                        time3Price: this.editFreight.time3Price,

                        time4: this.editFreight.time4,
                        time4Price: this.editFreight.time4Price,

                        time5: this.editFreight.time5,
                        time5Price: this.editFreight.time5Price,

                        levelFreight: this.editFreight.levelFreight,
                        levelStart: this.editFreight.levelStart,
                        type: this.editFreight.type,
                        enabledLevel: "",
                        ykg: "",
                        enterpriseId: this.enterpriseId,
                        ctd: "",
                        ctdPrice: "",
                        ykgPrice: "",
                        itemList: [],
                    };
                    freight.ykg = this.citys.ykg;
                    // freight.levelFreight=this.citys.levelFreight
                    freight.ctd = this.citys.ctd;
                    freight.ctdPrice = this.citys.ctdPrice;
                    // freight.levelStart=this.citys.levelStart
                    freight.ykgPrice = this.citys.ykgPrice;
                    if (this.editFreights.length > 1) {
                        this.editFreights.splice(0, 1);
                        freight.itemList = this.editFreights;
                    }
                    freight.itemList.forEach((item) => {
                        item.type = freight.type;
                    });
                    if (this.editFreight.levelStart > 0) {
                        freight.enabledLevel = true;
                    } else {
                        freight.enabledLevel = false;
                    }
                    console.log(freight);
                    if (
                        freight.ykg === "" ||
                        freight.ctd === "" ||
                        freight.ctdPrice === "" ||
                        freight.ykgPrice === ""
                    ) {
                        this.$message.error("请完善运费模板信息");
                        this.clicked = false;
                        return;
                    } else {
                        this.clicked = false;
                        update(freight)
                            .then((response) => {
                                this.clicked = false;
                                this.editVisible = false;
                                this.loadFreight();
                            })
                            .catch((error) => {
                                this.clicked = false;
                            });
                    }
                }
            });
        },
        formatCity(ARR, array) {
            for (const key in ARR) {
                let obj = {};
                obj.value = key;
                obj.label = ARR[key];
                array.push(obj);
                if (province[key]) {
                    obj.children = [];
                    this.formatCity(province[key], obj.children);
                }
            }
        },
        deleteFreightTable(index) {
            this.freightTable.splice(index, 1);
        },
        addClick() {
            this.$refs.addFreight.clean();
            this.$refs.addFreight.clicked = false;
            this.$refs.addFreight.addFreight.dialogFormVisible = true;
            this.$refs.addFreight.addFreightClick();
        },
        beforeMount() {
            var _this = this;
            window.onresize = () => {
                return (() => {
                    if (this.queryType == false) {
                        var h =
                            document.documentElement.clientHeight ||
                            document.body.clientHeight;
                        _this.curHeight = h - 266; //减去页面上固定高度height
                    } else {
                        var h =
                            document.documentElement.clientHeight ||
                            document.body.clientHeight;
                        _this.curHeight = h - 220; //减去页面上固定高度height
                    }
                })();
            };
        },
        comeIn() {
            console.log("222");
            var h =
                document.documentElement.clientHeight ||
                document.body.clientHeight;
            this.curHeight = h - 220; // 减去页面上固定高度height
        },
        chooseClick() {
            this.queryType = !this.queryType;
            if (this.queryType == false) {
                var h =
                    document.documentElement.clientHeight ||
                    document.body.clientHeight;
                this.curHeight = h - 266; //减去页面上固定高度height
            } else {
                var h =
                    document.documentElement.clientHeight ||
                    document.body.clientHeight;
                this.curHeight = h - 220; //减去页面上固定高度height
            }
        },
    },
};
</script>

<style scoped>
.popup_content {
    padding-bottom: 0px !important;
}
.el-footerBox {
    height: 50px !important;
    line-height: 50px !important;
    border-top: 1px solid #eeeeee;
}

/deep/ .el-dialog__header {
    border: 1px solid #eeeeee !important;
    padding: 15px !important;
}

/deep/ .el-dialog__body {
    padding: 0px 20px !important;
    margin-top: 20px;
    margin-bottom: 10px;
}
/deep/.el-main {
    padding: 0;
}
.app {
    background-color: rgba(248, 248, 248, 0.8);
}
/deep/.el-header {
    padding: 10px;
    /* height: 100% !important; */
    padding-bottom: 0;
}
.report_header {
    width: 100%;
    min-height: 40px;
    box-sizing: border-box;
    background-color: rgba(248, 248, 248, 0.8);
    display: flex;
    align-items: center;
    padding-bottom: 5px;
    position: relative;
    padding-left: 5px;
    padding-right: 5px;
}

.report_header_left {
    width: 5px;
    height: 100%;
    background-color: #409eff;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
}

.report_header_query {
    margin-left: 10px;
    width: 180px;
    margin-top: 5px;
}
</style>
